const form=layui.form
axios.get('/my/article/cates')
    .then(res => {
        // console.log(res)
        // 需要把option 的value值设置为对应得Id
        const str = res.data.data.map((res) => `
    <option value="${res.Id}">${res.name}</option>
    `).join('')
        //把option内容放到下拉框中 html() 方法可以使用 但会覆盖原有内容 建议使用 append 
        $('#cateSelect').append(str)

        form.render('select'); //刷新select选择框渲染

    })

// todo======================富文本编辑器==========================

    const E = window.wangEditor
    const editor = new E("#contentBox")
    // 或者 const editor = new E(document.getElementById('div1'))
    editor.config.zIndex = 500;
    editor.create()

// todo =======================裁切区域=========================
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)


// ====================================选择封面===========================
// !点击按钮 触发文件选择框的点击事件
$('#btnChooseCoverImage').click(function(){
    $('#fileCover').click()
})

// ======================更换裁切区域的图片================
// 步骤
// 1.给文件选择框注册 change 事件
// 2.去获取到用户选择的文件
// 3.把文件对象转换为img图片地址

// 1.
$('#fileCover').on('change',function(){
    // 2.
    const file = this.files[0]
    // console.log(file);

    if(!file) return
    // 3.
    const imgSrc=URL.createObjectURL(file)
    // console.log(imgSrc);

    // $image.attr('src',imgSrc) 无法实现
    // 需要先销毁旧的裁剪区域 之后按照新的图片地址重新生成裁剪区域（预览图片）
    $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', imgSrc)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
})

// todo =================发布或存为草稿===========================
// 1.给form表单注册submit事件
$('#form').on('submit',function(e){

    // 2.阻止默认行为
    e.preventDefault()
    
    // 3.收集表单数据 (serialize FormData) 按照接口文档要求采用FormData
    const fd= new FormData(this)

    // 收集不到的数据 可以通过append追加
    // editor.txt.html() 获取内容带标签
    fd.append('content',editor.txt.html())
    
    fd.append('state',state)

    // 收集裁剪图片
    $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
    })
    .toBlob(function(blob) {       
    	// 将 Canvas 画布上的内容，转化为文件对象
        // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
        // 收集
        fd.append('cover_img',blob)

        // 了解即可 方便查看fd收集到的数据

        // !代码位置
        axios.post('/my/article/add',fd)
        .then(({data}) => {
            // console.log(res)
            if(data.status!==0){
                return layer.msg(data.message)
            }

            layer.msg(data.message, {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
                //do something
                location.href='/article/art_list.html'
              }); 
            })
        // fd.forEach(function(value,name){
        // console.log(value,name);
    // })
    })
})

// 文章状态的收集
// 看点击了什么按钮
// 给按钮注册点击事件
// 声明一个变量来存状态数据
    let state

    // 发布按钮
    $('#btnPublish').click(function(){
        state='已发布'
    })

    // 草稿
    $('#btnSave').click(function(){
        state='草稿'
    })